<script setup lang="ts">
  import { ref } from 'vue';
  import { Persistent } from '@/utils/cache/persistent';
  import { SN_KEY } from '@/enums/cacheEnum';
  import { RangeValue } from 'ant-design-vue/es/vc-picker/interface';
  import dayjs from 'dayjs';
  import {
    exportDeviceHistoryDataApi,
    IotUniDataLog,
    selectIotUniDataLogApi,
  } from '@/api/hc/iotDeviceData';
  import { PageWrapper } from '@/components/Page';
  import LineChart from '@/views/zhm/components/LineChart.vue';

  let sn = ref<string>(Persistent.getLocal(SN_KEY) || '');
  var list = ref<IotUniDataLog[]>([]);
  var chartList = ref<ChartData[]>([]);
  function snChange() {
    Persistent.setLocal(SN_KEY, sn.value);
  }

  let startTs: number = dayjs().subtract(1, 'hour').valueOf();
  let endTs: number = dayjs().valueOf();
  const onRangeChange = (dates: RangeValue<string>, dateStrings: string[]) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      startTs = dayjs(dateStrings[0]).valueOf();
      endTs = dayjs(dateStrings[1]).valueOf();
      console.log('From: ', startTs, ', to: ', endTs);
    } else {
      console.log('Clear');
    }
  };

  function download() {
    exportDeviceHistoryDataApi({
      sn: sn.value,
      startTs: startTs,
      endTs: endTs,
    });
  }

  interface ChartData {
    title: string;
    yData: number[];
    xData: string[];
  }

  function listData() {
    selectIotUniDataLogApi({
      sn: sn.value,
      startTs: startTs,
      endTs: endTs,
      action: 'up:set',
      func: '0',
      includeFields: ['id', 'sn', 'ts', 'paramMap', 'action', 'func'],
    }).then((res) => {
      list.value = res;

      const xMap = new Map<string, string[]>();
      const yMap = new Map<string, number[]>();
      res.forEach((item) => {
        const ts = dayjs(item.ts).format('HH:mm');
        for (const [key, value] of Object.entries(item.paramMap)) {
          if (!xMap.has(key)) {
            xMap.set(key, []);
          }
          xMap.get(key)?.push(ts);
          if (!yMap.has(key)) {
            yMap.set(key, []);
          }
          yMap.get(key)?.push(Number(value));
        }
      });
      xMap.forEach((value, key) => {
        chartList.value.push({
          title: key,
          yData: yMap.get(key) || [],
          xData: value,
        });
      });
      console.log(chartList.value);
    });
  }
</script>

<template>
  <PageWrapper>
    <a-input class="w-xs mr-2" v-model:value="sn" @change="snChange" />
    <a-range-picker
      style="width: 400px"
      show-time
      :default-value="[dayjs(startTs), dayjs(endTs)]"
      format="YYYY/MM/DD HH:mm:ss"
      @change="onRangeChange"
      class="mr-2"
    />
    <a-button type="primary" @click="listData" class="mr-2">获取</a-button>
    <a-button type="primary" @click="download" class="mr-2">下载</a-button>
    <div v-for="item in chartList" :key="item.title" class="w-full h-400px">
      <LineChart :title="item.title" :yData="item.yData" :xData="item.xData" />
    </div>
    <!--    <a-list item-layout="horizontal" :data-source="list" class="mt-2">-->
    <!--      <template #renderItem="{ item }">-->
    <!--        <a-list-item>-->
    <!--          <a-list-item-meta :description="JSON.stringify(item.paramMap)">-->
    <!--            <template #title>-->
    <!--              <a href="https://www.antdv.com/">{{-->
    <!--                dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss')-->
    <!--              }}</a>-->
    <!--            </template>-->
    <!--          </a-list-item-meta>-->
    <!--        </a-list-item>-->
    <!--      </template>-->
    <!--    </a-list>-->
  </PageWrapper>
</template>

<style scoped lang="less"></style>
